<template>
  <el-dialog v-bind="{ ...$attrs }" class="app-edit" >
    <el-form ref="ruleFormRef"  :rules="rules" label-width="120px"  status-icon>
      <el-form-item :label="`分流 #${index+1}`" prop="redirectType" v-for="(item,index) in stateLists" :key="index">
          <el-select v-model="item.redirectType">
            <el-option label="网址" :value="0"></el-option>
            <el-option label="电话" :value="1"></el-option>
            <el-option label="邮箱" :value="2"></el-option>
            <el-option label="短信" :value="3"></el-option>
          </el-select>
          <el-input placeholder="输入短网址搜寻" v-model="item.target" style="margin-top: 10px;">
            <!-- <template #append>
              <el-button type="primary" @click="openBuilder(index)">UTM Builder</el-button>
            </template> -->
          </el-input>
      </el-form-item>
      <el-form-item>
        <el-popover
          placement="bottom"
          title="参数功能"
          :width="600"
          trigger="click"
        >
          <template #reference>
            <el-button class="m-2"> <el-icon><QuestionFilled /></el-icon> 参数功能</el-button>
          </template>
          <div class="tips-content">
                  短网址创立后, 可在短网址后面输入任何自己想要的参数
                  <br>范例 -&nbsp;创好得到的短网址 =&gt;&nbsp;lihi.cc/kWgB7
                  <br>短网址后面可以随意加入自己想要的参数
                  <br>lihi.cc/kWgB7/<b style="color: red">JAY</b>
                  <br>lihi.cc/kWgB7/<b style="color: red">TONY</b>
                  <br>lihi.cc/kWgB7/<b style="color: red">参数自己随便填写</b>
                  <br>所有被点击过的连结, 只要有填写参数, 参数都会被记录在短网址数据内
                  <br>如果你想要把这个参数PASS到自己的网址内的话. 只要在自己的网址内加上<b style="color: red">{lihi}</b>就可以了
                  <br>假设你的网址是&nbsp;YourDomain.com, 你后面加了GA UTM后变成&nbsp;YourDomain.com/?utm_source=<b style="color: red">{lihi}</b>
                  <br>任何人点了&nbsp;lihi.cc/kWgB7/<b style="color: red">JAY</b>&nbsp;后, 参数就会被带进去, 最后到达网址就会变成&nbsp;YourDomain.com/?utm_source=<b style="color: red">JAY</b>
                  <br>你的GA就能记录到 <b style="color: red">JAY</b> 这个参数了
          </div>
        </el-popover>
      </el-form-item>
    </el-form>
    <template #footer>
        <el-button @click="$emit('close')"> 关闭 </el-button>
        <el-button type="primary" @click="submitForm()"> 确认 </el-button>
    </template>
    <Builder title="UTM Builder" v-model="builderDialog" @close="builderDialog=false" @success="getLineTarget"></Builder>
  </el-dialog>
</template>
 
<script lang="ts" setup>
import { reactive, ref ,withDefaults,defineEmits} from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import {QuestionFilled} from '@element-plus/icons-vue'
import Builder from './Builder.vue';
import { addLineDetail } from '@/server/home'
import { ElMessage } from 'element-plus'
//自定义属性
const props = defineProps({
  id:{
    type:String,
    default:()=>''
  }
})
const emit = defineEmits<{(event: 'close'): void;(event: 'success'): void;  }>()
//开关
const builderDialog = ref(false)
//表单
const formSize = ref('large')

//分流网址
const stateLists= reactive([
  {
  "target": "",
  "redirectType": 0,
  "utmSource": "",
  "utmMedium": "",
  "utmCampaign": "",
  "utmTerm": "",
  "utmContent":""
}
])

//提交
const submitForm = async () => {
 try{
  stateLists.forEach((item:any)=>{
    for(let i in item){
      if(!item[i]) delete item[i]
    }
  })
  console.log(stateLists,888)
  await addLineDetail(props.id,stateLists[0])
  ElMessage.success("新增成功")
  emit("success")
 }catch(err){
  ElMessage.error("新增失败")
 }
 
}
//弹出构建
const bIndex=ref(0)
const openBuilder=(index:number)=>{
  builderDialog.value=true
  bIndex.value=index
}
//解析url
function queryURLParams(URL:string) {
    let url = URL.split("?")[1];
    const urlSearchParams = new URLSearchParams(url);
    const params = Object.fromEntries(urlSearchParams.entries());
    return params
}
//接收构建的url
const getLineTarget=(e:string) => {
  const obj=queryURLParams(e)
  obj['target']=e
  builderDialog.value=false
  stateLists[bIndex.value]=Object.assign(stateLists[bIndex.value],obj)
  console.log("🚀 ~ getLineTarget ~ stateLists[bIndex.value]:", stateLists[bIndex.value])
}


</script>
<style lang="scss" scoped>
.edit-btn{
    display: flex;
    width: 100%;
}
.tips-content{
  padding: 10px;
  border-top: 1px solid #eee;
}
</style>